<template>
  <div class="contrast moreContrast">
    <el-popover
      placement="bottom-end"
      ref="popver"
      width="550"
      trigger="click"
      popper-class="clamisPopver"
    >
      <div class="input" tabindex="1" style="cursor: pointer" slot="reference">
        <span>更多</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <!-- 列表 -->
      <commonTable :data="flatData" :itemHeight="40" :visibleCount="10">
        <template slot-scope="{ item }">
          <div v-if="item.isTitle" class="item_title">{{ item.title }}</div>
          <div v-else-if="item.isTableHeader" class="item_header">
            <div
              v-for="(i, ind) in tableColumn"
              :key="ind"
              class="item_header_td"
            >
              {{ i.label }}
            </div>
          </div>
          <div v-else class="item_tr">
            <div class="item_header_td">{{item.pubNumber}}</div>
            <div class="item_header_td">{{item.pd}}</div>
            <div class="item_header_td">{{item.title}}</div>
          </div>
        </template>
      </commonTable>
    </el-popover>
  </div>
</template>

<script>
import { map } from "../tableComponent/a.js";
import commonTable from "./common.vue";
export default {
  data() {
    return {
      contrastObj: map,
      contrastOptions: [
        { label: "名字一", value: "OTPUB" },
        { label: "名字二", value: "PRI" },
        { label: "名字三", value: "FAM_HIMM" },
      ],
      tableColumn: [
        { label: "公开号", prop: "pubNumber", width: "150" },
        { label: "公开日", prop: "pd", width: "100" },
        { label: "发明名称", prop: "title" },
      ],
      renderIndex: 5,
      time: null,
      showData: [],
    };
  },
  computed: {
    flatData() {
      let arr = [];
      let index = 0;
      this.contrastOptions.forEach((item) => {
        arr.push({
          title: item.label,
          isTitle: true,
          id: ++index,
        });
        arr.push({
          title: item.label,
          isTableHeader: true,
          id: ++index,
        });
        arr = arr.concat(
          ...this.contrastObj[item.value].map((it) => {
            it.par = item.value;
            it.id = ++index;
            return it;
          })
        );
      });
      return arr;
    },
  },
  components: {
    commonTable,
  },
  mounted() {
    // this.load();
  },
  methods: {
    load() {
      const draw = () => {
        this.time = setTimeout(() => {
          if (this.renderIndex < 100) {
            this.renderIndex += 50;
            draw();
          }
        }, 300);
      };
      draw();
    },

    handleCellClick(row, column, cell, event) {},
  },
};
</script>
<style scoped lang="less">
.input {
  width: 60px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #86909c;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 12px;
  font-weight: 400;
  color: #86909c;
  padding: 9px 10px;
  padding-right: 0;
  box-sizing: border-box;
  i {
    position: absolute;
    right: 8px;
    top: 5px;
  }
}
.input:focus {
  border: 1px solid #1c4cba;
  color: #1c4cba;
}
.contrast {
  // min-width: 320px;
  min-width: 0px;
  justify-content: flex-end;
  margin-left: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  p {
    font-size: 14px;
    font-weight: 500;
    margin-right: 10px;
  }
}
.item_title {
  font-weight: 600;
  font-size: 14px;
  color: #4e5969;
  line-height: 16px;
  height: 100%;
  padding-bottom: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
}
.item_header {
  font-size: 14px;
  color: #4e5969;
  background: #eef0f3;
  border-radius: 4px 4px 0 0;
  border: 1px solid #dce1e8;
  border-bottom: none;
  box-sizing: border-box;
  line-height: 40px;
  height: 100%;
  display: flex;
}
.item_header_td {
  flex: 1;
  border-right: 1px solid #e7ecf2;
  border-bottom: 1px solid #e7ecf2;
  box-sizing: border-box;
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  &:nth-last-of-type(1) {
    border-right: none;
  }
}
.item_tr {
  font-size: 14px;
  color: #1d2129;
  border: 1px solid #dce1e8;
  border-top: none;
  border-bottom: none;
  line-height: 40px;
  height: 100%;
  display: flex;
}
</style>

<style lang="less">
.clamisPopver {
  max-height: 455px;
  height: fit-content;
  padding: 14px;
}
</style>
